<template>
    <div class="app-container">
        <!-- 表格-条件筛区域  -->
        <div class="filter-container">
            <el-input placeholder="请输入关键字" v-model="searchParam.SEARCH_LIKE_name" style="width: 200px;"
                      class="filter-item" @keyup.enter.native="handleFilter"/>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter"> 搜索</el-button>
            <el-button class="filter-item" type="default" icon="el-icon-search" @click="searchReset"> 重置</el-button>
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit"
                       @click="handleCreate"> 新增
            </el-button>
        </div>

        <!-- 表格-内容区域 -->
        <el-table v-loading="listLoading" :key="tableKey" :data="tableList" border fit highlight-current-row
                  style="width: 100%;">
            <el-table-column v-for="column in columns" :key="column.prop"
                             :prop="column.prop"
                             :label="column.label"
                             :width="column.width"
                             :align="column.align?column.align:'center'"
                             :min-width="column.minWidth"
                             :sortable="column.sortable"
                             :fixed="column.fixed"
                             :type="column.type" :formatter="column.formatter">
                <template slot-scope="scope">
                    <!-- 行内显示图片 -->
                    <img v-if="column.imgFlag==true"
                         :src=" scope.row[column.prop].indexOf('http://') >-1 ?  scope.row[column.prop] : ( CMBASE.baseFileContext + scope.row[column.prop] ) "
                         width="60" height="60" class="img" alt=""/>
                    <!-- 行内显示开关按钮 -->
                    <el-switch v-else-if="column.switchFlag==true" v-model="scope.row[column.prop]" :active-value="1"
                               :inactive-value="0" disabled></el-switch>
                    <!-- 行内显示tag标签 -->
                    <span v-else-if="column.tagFlag==true">
                        <span v-for="item in column.tagFormatter" :key="item.value">
                            <el-tag v-if="item.value==scope.row[column.prop]" :type="item.type">{{item.text}}</el-tag>
                        </span>
                    </span>
                    <!-- 行内格式自定义 -->
                    <span v-else-if="column.formatter"> {{column.formatter(scope.row)}}</span>
                    <!--默认显示文本-->
                    <span v-else>{{scope.row[column.prop]}}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="240" class-name="small-padding">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)"> 编辑 </el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)"> 删除 </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格-页脚区域 -->
        <pagination v-show="tableTotal>0" :total="tableTotal" :page.sync="pageRequest.pageNum" :limit.sync="pageRequest.pageSize" @pagination="getList"/>

        <!--新增编辑界面-->
        <el-dialog :title="operation?'新增':'编辑'" width="45%" top="5vh" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <el-form :model="dataForm" label-width="140px" :rules="dataFormRules" ref="dataForm" style="width: 80%">

                <#if vo.columns?exists>
                    <#list vo.columns as formField>
                        <#if formField.FORM_SHOW_FLAG == false>
                        <#--普通文本-->
                        <#elseif formField.FORM_SHOW_TYPE == "0">
                <el-form-item label="${formField.columnRemark}" prop="${formField.columnName}">
                    <el-input v-model="dataForm.${formField.columnName}" auto-complete="off" placeholder="请输入${formField.columnRemark}"/>
                </el-form-item>
                        <#--计数器-->
                        <#elseif formField.FORM_SHOW_TYPE == "10">
                <el-form-item label="${formField.columnRemark}" prop="${formField.columnName}">
                    <el-input-number v-model="dataForm.${formField.columnName}"   :min="1" :max="1000" label="${formField.columnRemark}"></el-input-number>
                </el-form-item>
                        <#--日期选择-->
                        <#elseif formField.FORM_SHOW_TYPE == "1">
                <el-form-item label="${formField.columnRemark}" prop="${formField.columnName}">
                    <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.${formField.columnName}"
                        value-format="yyyy-MM-dd"
                        style="width: 100%;"></el-date-picker>
                </el-form-item>
                        <#--下拉框选择-->
                        <#elseif formField.FORM_SHOW_TYPE == "2">
                <el-form-item label="${formField.columnRemark}" prop="${formField.columnName}">
                    <el-select v-model="dataForm.${formField.columnName}" placeholder="请选择下拉数据">
                        <el-option label="数据一" value="1"></el-option>
                        <el-option label="数据二" value="2"></el-option>
                    </el-select>
                </el-form-item>
                        <#--按钮组选择-->
                        <#elseif formField.FORM_SHOW_TYPE == "21">
                <el-form-item label="${formField.columnRemark}" prop="${formField.columnName}">
                    <el-radio-group v-model="dataForm.${formField.columnName}">
                        <el-radio-button label="1">分类1</el-radio-button>
                        <el-radio-button label="2">分类2</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                        <#--单图上传-->
                        <#elseif formField.FORM_SHOW_TYPE == "3">
                <el-form-item label="${formField.columnRemark}" prop="${formField.columnName}">
                    <cm-upload  v-model="dataForm.${formField.columnName}"  ></cm-upload>
                </el-form-item>
                        <#--多图上传-->
                        <#elseif formField.FORM_SHOW_TYPE == "31">
                <el-form-item label="${formField.columnRemark}" prop="${formField.columnName}">
                    <cm-upload-more  v-model="dataForm.${formField.columnName}"   ></cm-upload-more>
                </el-form-item>
                        <#--多行文本-->
                        <#elseif formField.FORM_SHOW_TYPE == "4">
                <el-form-item label="${formField.columnRemark}" prop="${formField.columnName}">
                    <el-input type="textarea" v-model="dataForm.${formField.columnName}"></el-input>
                </el-form-item>
                        <#--开关-->
                        <#elseif formField.FORM_SHOW_TYPE == "5">
                <el-form-item label="${formField.columnRemark}" prop="${formField.columnName}">
                    <el-switch v-model="dataForm.${formField.columnName}" :active-value="1"
                               :inactive-value="0"></el-switch>
                </el-form-item>
                        <#--多选框-->
                        <#elseif formField.FORM_SHOW_TYPE == "6">
                <el-form-item label="${formField.columnRemark}" prop="${formField.columnName}">
                    <el-checkbox-group v-model="dataForm.${formField.columnName}">
                        <el-checkbox label="1" >多选1</el-checkbox>
                        <el-checkbox label="2" >多选2</el-checkbox>
                        <el-checkbox label="3" >多选3</el-checkbox>
                        <el-checkbox label="4" >多选4</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                        <#--单选框-->
                        <#elseif formField.FORM_SHOW_TYPE == "7">
                <el-form-item label="${formField.columnRemark}" prop="${formField.columnName}">
                    <el-radio-group v-model="dataForm.${formField.columnName}">
                        <el-radio label="0" >单选1</el-radio>
                        <el-radio label="1" >单选2</el-radio>
                    </el-radio-group>
                </el-form-item>
                        <#--富文本编辑器-->
                        <#elseif formField.FORM_SHOW_TYPE == "8">
                <el-form-item label="${formField.columnRemark}" prop="${formField.columnName}">
                    <tinymce :height="300" v-model="dataForm.${formField.columnName}" id='tinymce'  :value="dataForm.${formField.columnName}" v-if="dialogFormVisible"   ></tinymce>
                </el-form-item>
                        <#else>
                            未指定
                        </#if>
                    </#list>
                </#if>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click.native="closeDialog()">取消</el-button>
                <el-button size="mini" @click.native="saveFormData()" :loading="editLoading" type="primary">提交 </el-button>
            </div>
        </el-dialog>


    </div>
</template>
<script>
    import Pagination from '@/components/Pagination' // 分页栏信息
    import { get${vo.tablename_uperCase}List, save${vo.tablename_uperCase}, edit${vo.tablename_uperCase}, delete${vo.tablename_uperCase}} from '@/api/modules/XXX'
    <#if vo.cmUpload==true >
    import CmUpload from '@/components/Upload' // 上传图片组件引入
    </#if>
    <#if vo.cmUploadMore==true >
    import CmUploadMore from '@/components/UploadMore' // 上传图片组件引入
    </#if>
    <#if vo.cmRichText==true >
    import Tinymce from '@/components/RichText' // 富文本编辑器引入
    </#if>

    export default {
        name: '${vo.describe}',
        components: {
            Pagination,
            <#if vo.cmUpload==true >
            CmUpload ,
            </#if>
            <#if vo.cmUploadMore==true >
            CmUploadMore ,
            </#if>
            <#if vo.cmRichText==true >
            Tinymce,
            </#if>
        },
        directives: {   },
        filters: { },
        data() {
            return {
                tableKey: 0,
                tableList: [],//表格数据源
                tableTotal: 0,//表格总条数数据
                listLoading: true,
                pageRequest: { pageNum: 1, pageSize: 10, },
                searchParam:{},
                dialogFormVisible: false,//默认不显示弹出框
                operation: true, // true:新增, false:编辑
                editLoading: false,//保存表单时loading框
                columns: [
                    <#if vo.columns?exists>
                        <#list vo.columns as item>
                            <#if item.LIST_SHOW_FLAG== false  >
                                <#--普通文本-->
                                <#elseif item.LIST_SHOW_TYPE == "0">
                    {prop: '${item.columnName}',  label: '${item.columnRemark}',  sortable:false  },
                                <#--图片-->
                                <#elseif item.LIST_SHOW_TYPE == "1">
                    {prop: '${item.columnName}',  label: '${item.columnRemark}',  sortable:false , imgFlag:true },
                                <#--标签-->
                                <#elseif item.LIST_SHOW_TYPE == "2">
                    {prop: '${item.columnName}',  label: '${item.columnRemark}', sortable: false, tagFlag: true,
                        tagFormatter: [
                            {text: '标签0', value: 0, type: 'info'},
                            {text: '标签1', value: 1, type: 'success'},
                            {text: '标签2', value: 2, type: 'warning'},
                            {text: '标签3', value: 3, type: 'error'}
                        ]
                    },
                    <#--开关-->
                                <#elseif item.LIST_SHOW_TYPE == "3">
                    {prop: '${item.columnName}',  label: '${item.columnRemark}',  sortable:false ,  switchFlag: true, },
                            <#else>
                                未指定
                            </#if>
                        </#list>
                    </#if>
                ],
                fileList: [],
                // 新增编辑界面数据
                dataForm: {},
                //表单检验规则
                dataFormRules: {
            <#if vo.columns?exists>
                <#list vo.columns as item>
                    <#if item.FORM_SHOW_FLAG==true && item.FORM_RULE_FLAG==true>
                    ${item.columnName}: [ { required: true, message: '请输入${item.columnRemark}', trigger: 'blur' } ],
                    </#if>
                </#list>
            </#if>
                },
            }
        },
        methods: {
            //获取表格数据
            getList() {
                this.listLoading = true
                //【API请求】----获取表格列表数据
                get${vo.tablename_uperCase}List(this.pageRequest).then(response => {
                    response = response.result
                    this.tableList = response.content
                    this.tableTotal = response.total
                    this.listLoading = false;
                }).catch((res) => {
                    this.$message({  message: res.msg, type: 'error' })
                })
            },
            //表格数据筛选
            handleFilter() {
                this.pageRequest.searchParam = this.searchParam
                this.getList()
            },
            //【按钮点击】--- 弹出新增表单
            handleCreate() {
                this.operation = true;
                this.initDataForm();
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                    this.editLoading = false;
                })
            },
            //【按钮点击】--- 弹出编辑表单
            handleUpdate(row) {
                this.operation = false;
                this.dataForm = Object.assign({}, row)
                //显示编辑菜单
                this.dialogFormVisible = true
                this.$nextTick(() => {
                    this.$refs['dataForm'].clearValidate()
                    this.editLoading = false;
                })
            },
            //保存表单数据
            saveFormData() {
                let res
                this.$refs['dataForm'].validate(async(valid) => {
                    if (!valid) {
                        return false;
                    }
                    this.editLoading = true;
                    //【API请求】----保存数据
                    if (this.dataForm.id === null || this.dataForm.id === ''){
                        res = await save${vo.tablename_uperCase}(this.dataForm)
                    } else {
                        res = await edit${vo.tablename_uperCase}(this.dataForm)
                    }
                    try {
                        if (res.code === 0) {
                            this.dialogFormVisible = false// 关闭表单页面
                            this.initDataForm()// 重置表单数据
                            this.getList()// 重新获取表格数据
                            this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
                        }
                        this.editLoading = false// 关闭loading框
                    } catch (e) {
                        throw e
                    }
                })
            },
            //【按钮点击】---删除行
            handleDelete(row) {
                this.$confirm('确认删除该记录吗？', '提示', {}).then(() => {
                    //【API请求】---- 删除数据
                    delete${vo.tablename_uperCase}(row.id).then(() => {
                        this.$message({  message: '操作成功', type: 'success' })
                        this.getList();
                    })
                }).catch(() => {
                    this.$message({  message: '操作失败', type: 'error' })
                });
            },
            //初始化表单数据，重新渲染
            initDataForm(){
                this.dataForm = {
                <#if vo.columns?exists>
                    <#list vo.columns as item>
                        ${item.columnName}: '' ,
                    </#list>
                </#if>
                };
            },
            //关闭表单弹出框
            closeDialog() {
                this.$refs['dataForm'].resetFields();
                this.dialogFormVisible = false
            },
            // 重置按钮
            searchReset() {
                this.searchParam = {}
                this.pageRequest = {pageNum: 1, pageSize: 10}
                this.getList()
            },
        },
        created() {
            this.getList();
        },
    }
</script>
